<template>
  <div class="divBox">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="container">
          <el-form size="small" label-width="150px" :inline="true">
            <el-form-item :label="$t('usagestatus')" class="mr10">
              <el-select
                v-model="tableFromIssue.status"
                :placeholder="$t('please55')"
                @change="getIssueList"
                class="selWidth"
              >
                <el-option :label="$t('all')" value="" />
                <el-option :label="$t('used')" value="1" />
                <el-option :label="$t('notused')" value="0" />
                <el-option :label="$t('expired')" value="2" />
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('recipient')" class="mr10">
              <el-input
                v-model="tableFromIssue.username"
                @keyup.enter.native="getIssueList"
                :placeholder="$t('please53')"
                class="selWidth"
              >
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  class="el-button-solt"
                  @click="getIssueList"
                />
              </el-input>
            </el-form-item>
            <el-form-item :label="$t('coupon')" class="mr10">
              <el-input
                v-model="tableFromIssue.coupon_id"
                @keyup.enter.native="getIssueList"
                :placeholder="$t('please54')"
                class="selWidth"
              >
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  class="el-button-solt"
                  @click="getIssueList"
                />
              </el-input>
            </el-form-item>
            <el-form-item :label="$t('acquisitionmethod')" class="mr10">
              <el-select
                v-model="tableFromIssue.type"
                :placeholder="$t('please55')"
                @change="getIssueList"
                class="selWidth"
              >
                <el-option :label="$t('all')" value="" />
                <el-option :label="$t('collectbyyourself')" value="receive" />
                <el-option :label="$t('backgroundsending')" value="send" />
                <el-option :label="$t('newpeople')" value="new" />
                <el-option :label="$t('buyfree')" value="buy" />
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <el-table v-loading="Loading" :data="issueData.data" style="width: 100%">
        <el-table-column prop="coupon_id" label="ID" min-width="80" />
        <el-table-column
          prop="coupon_title"
          :label="$t('couponname')"
          min-width="150"
        />
        <el-table-column :label="$t('recipient')" min-width="200">
          <template slot-scope="scope">
            <span v-if="scope.row.user">{{
              scope.row.user.nickname | filterEmpty
            }}</span>
            <span v-else>{{ $t("unknown") }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="coupon_price"
          :label="$t('facevalue')"
          min-width="100"
        />
        <el-table-column
          prop="use_min_price"
          :label="$t('minimumconsumption')"
          min-width="120"
        />
        <el-table-column
          prop="start_time"
          :label="$t('starttime')"
          min-width="150"
        />
        <el-table-column
          prop="end_time"
          :label="$t('endtime')"
          min-width="150"
        />
        <el-table-column :label="$t('acquisitionmethod')" min-width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.type | failFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="is_fail"
          :label="$t('available')"
          min-width="100"
        >
          <template slot-scope="scope">
            <i
              v-if="scope.row.is_fail === 0"
              class="el-icon-check"
              style="font-size: 14px; color: #0092dc"
            />
            <i
              v-else
              class="el-icon-download"
              style="font-size: 14px; color: #ed5565"
            />
          </template>
        </el-table-column>
        <el-table-column :label="$t('state')" min-width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.status | statusFilter }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          :page-sizes="[10, 20, 30, 40]"
          :page-size="tableFromIssue.limit"
          :current-page="tableFromIssue.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="issueData.total"
          @size-change="handleSizeChangeIssue"
          @current-change="pageChangeIssue"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import { issueApi } from "@/api/marketing";
import { roterPre } from "@/settings";
import $i18n from "@/language/index";
console.log("-----------");
export default {
  name: "CouponUser",
  filters: {
    failFilter(status) {
      const statusMap = {
        receive: $i18n.t("collectbyyourself"),
        send: $i18n.t("backgroundsending"),
        give: $i18n.t("fullgift"),
        new: $i18n.t("newpeople"),
        buy: $i18n.t("buyfree"),
      };
      return statusMap[status];
    },
    statusFilter(status) {
      const statusMap = {
        0: $i18n.t("notused"),
        1: $i18n.t("used"),
        2: $i18n.t("expired"),
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      Loading: false,
      roterPre: roterPre,
      tableFromIssue: {
        page: 1,
        limit: 10,
        coupon_id: "",
        status: "",
        username: "",
        type: "",
      },
      issueData: {
        data: [],
        total: 0,
      },
    };
  },
  mounted() {
    this.getIssueList();
  },
  methods: {
    // 列表
    getIssueList() {
      this.Loading = true;
      issueApi(this.tableFromIssue)
        .then((res) => {
          this.issueData.data = res.data.list;
          this.issueData.total = res.data.count;
          this.Loading = false;
        })
        .catch((res) => {
          this.Loading = false;
          this.$message.error(res.message);
        });
    },
    pageChangeIssue(page) {
      this.tableFromIssue.page = page;
      this.getIssueList();
    },
    handleSizeChangeIssue(val) {
      this.tableFromIssue.limit = val;
      this.getIssueList();
    },
  },
};
</script>

<style scoped lang="scss">
.box-card {
  ::v-deep.el-card__header {
    padding: 18px 20px 0 18px !important;
  }
}
.selWidth {
  width: 300px !important;
}
.seachTiele {
  line-height: 35px;
}
.fa {
  color: #0a6aa1;
  display: block;
}
.sheng {
  color: #ff0000;
  display: block;
}
</style>
